// vue3全局插件
// vue3全局指令

// 引入vuesuse里面监听视口方法,看图片是否出现在视口
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  // 全局插件对象里面必须install
  install (app) {
    // console.log(app)
    // 注册全局指令
    app.directive('img-lazy', {
      // vue2 用 inserted    vue3用mounted
      // el为v-img-lazy的节点
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          if (isIntersecting) {
            el.src = binding.value
            stop()
          }
        })
      }
    })
  }
}
export default plugin
